<template>
  <div>
    <div style="margin-bottom: 10px;">
      <!--面包屑-->
      <a-breadcrumb>
        <a-breadcrumb-item href="">
          <a-icon type="home" />  首页
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          平台退货结算
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <!--搜索框-->
    <div style="width: 35%;display: flex;justify-content: space-between">
      <a-input v-model="queryCondition.inventorySeq" allow-clear placeholder="请输入库存批次编号"  style="width: 150px">
      </a-input>
       <a-input v-model="queryCondition.createTime" type=date allow-clear placeholder="请输入退货日期"  style="width: 150px">
      </a-input>
      <a-button type="primary"  @click="onSearch" icon="search" style="width:85px;color: white">
        查询
      </a-button>
      <br /><br />
    </div>
    <!--数据表格-->
    <div>
      <a-table
          :columns="columns"
          :data-source="refundList"
          :scroll="{y: 600 }"
          :loading="loading"
          :pagination="pagination"
          :current="pagination.current"
          @change="tableChange"
          bordered
          style="align-content: center"
      >
        <template
            v-for="col in ['inventorySeq', 'supplierCode', 'commodityCode','commodityPrice','refundNum','settlementAmount','createTimeStr']"
            :slot="col"
            slot-scope="text, record, index"
        >
          <template>
            {{ text }}
          </template>
        </template>
        <template
            slot="operation"
            slot-scope="text, record, index"
        >
          <div style="display: flex;justify-content: space-around">
            <a-button
                type="primary"
                @click="showModal(record)"
                style="width: 65px"
            >审核
            </a-button>
          </div>

        </template>
      </a-table>
      <!--详情页面-->
      <div>
        <a-modal
            title="审核"
            :visible="modelVisible"
            :dialog-style="{ top: '20px' }"
            :width="720"
            @cancel="modelCancel()"
        >
          <template slot="footer">
                      <a-button @click="modelCancel">取消</a-button>
                      <a-button type="primary" @click="settlement(refund.inventorySeq)">结算</a-button>
          </template>
          <a-form :form="form" layout="vertical" hide-required-mark>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="库存批次">
                  <a-input v-model="refund.inventorySeq" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品编码">
                  <a-input v-model="refund.commodityCode"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品名字">
                  <a-input v-model="refund.commodityName"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品单价">
                  <a-input v-model="refund.commodityPrice"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="供货商编码">
                  <a-input v-model="refund.supplierCode"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="供货商名字">
                  <a-input v-model="refund.supplierName"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="退货数量">
                  <a-input v-model="refund.refundNum"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="退货总金额">
                  <a-input v-model="refund.settlementAmount"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import * as SupplierRefund from '@/services/refund/supplier_refund_order'

const columns = [
  { title: '库存批次', dataIndex: 'inventorySeq', key: 'inventorySeq', align: 'center' },
  { title: '供货商编码', dataIndex: 'supplierCode', key: 'supplierCode', align: 'center' },
  { title: '商品编码', dataIndex: 'commodityCode', key: 'commodityCode',  align: 'center' },
  { title: '商品单价', dataIndex: 'commodityPrice', key: 'commodityPrice',  align: 'center' },
  { title: '退货数量', dataIndex: 'refundNum', key: 'refundNum', align: 'center' },
  { title: '退货总金额', dataIndex: 'settlementAmount', key: 'settlementAmount', align: 'center' },
  { title: '退货发起时间', dataIndex: 'createTimeStr', key: 'createTimeStr', align: 'center' },
  { title: '操作', dataIndex: 'operation',  key: 'operation', align: 'center', scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: "SupplierRefundOrder.vue",
  data(){
    return {
      columns,
      loading: false,
      refundList:[],
      refund: '',
      modelVisible: false,
      queryCondition:{
        inventorySeq:'',
        createTime:'',
      },
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 4,
        showSizeChanger: true,
        pageSizeOptions: ['5', '15', '30', '50']
      }
    }
  },
  created() {
    this.render_table_data();
  },
  methods: {
    /*
   获取订单数据
     */
    async render_table_data(){
      this.loading = true;
      let resp = await SupplierRefund.getOrders();
      this.loading = false;
      this.refundList = resp;
    },
    async onSearch(){
      this.loading = true;
      console.log(this.queryCondition.createTime);
      let res = await SupplierRefund.queryRefundList(this.queryCondition);
      this.loading = false;
      this.refundList = res;
    },
    showModal(record) {
      this.modelVisible = true;
      this.refund = record;
      console.log(this.purchasePlan);
    },
    modelCancel(){
      this.modelVisible = false;
    },
    async settlement(inventorySeq){
      let res = await SupplierRefund.settlementRefund(inventorySeq);
      if(res === true){
         this.$message.success('结算成功', 3,);
      }else{
         this.$message.error('结算失败', 3,);
      }
      this.modelVisible = false;
       this.render_table_data();
    },
    /**
     *  监听table变化,更新当前页码
     */
    tableChange (e) {
      this.pagination.current = e.current
    },
    /*
    选择查询订单状态
     */
    handleSelect(value) {
      this.queryParams.settlementStatus=value;
    },
  }
}
</script>

<style scoped>

</style>